<script setup>
import { ref, reactive } from "vue";
import axios from 'axios'
import { useRouter, useRoute } from "vue-router";

const route = useRoute();
const studyCode = route.query.studyCode
const planId = route.query.planId

const showHeader = ref(true);
const bordered = ref(true);
const loading = ref(false);
const data = ref([]);
const totalScore = ref(0);
const testProcess = ref(0);
const columns = [
    { colKey: "prjName", title: "单项指标", width: 60 },
    { colKey: "result", title: "测试成绩", width: 60 },
    { colKey: "standardScore", title: "单项得分", width: 60 },
    { colKey: "prjWeight", title: "单项占比", width: 60 },
    { colKey: "finalScore", title: "最终得分", width: 60 },
    { colKey: "level", title: "评级", width: 'auto' },
];

const queryResult = () => {
    if (!studyCode || !studyCode.trim()) {
        return;
    }
    loading.value = true;
    totalScore.value = 0;
    testProcess.value = 0;
    axios.post('http://health.sqcoe.com/schoolServer/api/plan/queryResultByStudyCode', {
        planId: planId,
        studyCode: studyCode
    }).then(function (response) {
        let resData = response.data.data
        data.value = resData
        let tempTotalScore = 0;
        resData.forEach(element => {
            tempTotalScore = tempTotalScore + element.finalScore
        })
        totalScore.value = Number(tempTotalScore.toFixed(2))
        if (resData.length > 0) {
            testProcess.value = resData[0].testProcess * 100
        } else {
            testProcess.value = 0;
        }
        loading.value = false;
    }).catch(function (error) {
        console.log(error);
        loading.value = false;
    });
}
queryResult();
</script>

<template>
    <div class="container">
        <div class="query flex flex-center">
            <div class="flex1 flex flex-center flex-col">
                <div class="flex flex-col ">
                    <div class="title">姓名：{{ data[0]?.name }}</div>
                    <div class="title" style="margin-top:5px;">学号：{{ data[0]?.studyCode }}</div>
                </div>
            </div>
            <div class="result-circle flex flex-col flex-center">
                <div class="result-title">体测测试进度</div>
                <t-progress theme="circle" :percentage="testProcess" />
            </div>
        </div>
        <div class="total-score-title">总成绩：<span class="text">{{ totalScore }}&nbsp;分</span></div>
        <div class="content">
            <t-table class="table" :maxHeight="600" empty="暂无数据" :loading="loading" row-key="id" :data="data"
                :columns="columns" :bordered="bordered" :show-header="showHeader" cell-empty-content="-"></t-table>
        </div>
        <div class="total-score-remark">
            注：最终得分 = （单项得分 * 单项占比） + 附加分
        </div>
        <div class="score-remark">
            PS：根据国家标准，大学/高中/初中的加分项目为引体向上(男)，仰卧起坐(女)，1000米(男)，800米(女)，各指标加分幅度为10分，最多20分；小学加分项目为一分钟跳绳，加分幅度为20分。
        </div>
    </div>
</template>

<style scoped lang="less">
@fontSizeNormal: "16px";

.container {
    padding: 30px 0;
}

.header {
    font-size: @fontSizeNormal;
}

.query {
    background-color: #fff;
    padding: 0 0;

    .result-circle {
        padding: 0 30px;

        .result-title {
            font-size: 14px;
            margin-bottom: 20px;
            color: #999;
        }
    }
}

.total-score-title {
    margin-top: 16px;
    padding: 16px;

    .text {
        color: #f50;
    }
}

.total-score-remark {
    padding: 12px 16px;
    background-color: #acebf2;
    color: #666;
    font-size: 12px;
    margin: 20px 0;
}

.score-remark {
    padding: 12px 16px;
    color: #666;
    font-size: 12px;
    margin: 20px 0;
    line-height: 16px;
}

.content {
    border-top: 2px solid #f9f9f9;
    border-left: 1px solid #f9f9f9;
    border-right: 1px solid #f9f9f9;
    margin: 0 16px;

    .table {
        width: 100%;
    }
}
</style>
